<template>
	<div>
		<el-form ref="shopFrom" :model="shopFrom" label-width="80px">
			<div class="header">
				<el-row>
					<el-col :span="20">
						<el-menu :default-active="activeIndex" class="d_tabbar" mode="horizontal" @select="handleSelect">
							<el-menu-item index="1" class="menu-item">基本信息</el-menu-item>
							<el-menu-item index="2" class="menu-item">当前状态</el-menu-item>
							<el-menu-item index="3" class="menu-item">详情图片</el-menu-item>
						</el-menu>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple-light">
							<el-form-item>
								<el-button type="primary" size="small" @click="onSubmit">保存修改</el-button>
								<!--<el-button>取消</el-button>-->
							</el-form-item>
						</div>
					</el-col>
				</el-row>
			</div>

			<div v-if="activeIndex==1">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="商品名称">
							<el-input v-model="shopFrom.title"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="店铺名称">
							<el-input v-model="shopFrom.shop_name"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="商品简介">
							<el-input type="textarea" v-model="shopFrom.describe"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="上架时间">
							<el-input v-model="shopFrom.create_time" disabled></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="编辑时间">
							<el-input v-model="shopFrom.modify_time" disabled></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="售价(元)">
							<el-input v-model="shopFrom.price"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="原价(元)">
							<el-input v-model="shopFrom.o_price"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="实际销量">
							<el-input v-model="shopFrom.sale_num" disabled></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="显示销量">
							<el-input v-model="shopFrom.sale_num" disabled></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="查看次数">
							<el-input v-model="shopFrom.view_num" disabled></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="实际库存">
							<el-input v-model="shopFrom.num"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</div>

			<div v-else-if="activeIndex==2">
				<el-form-item label="当前状态">
					<el-radio-group v-model="shopFrom.status">
						<el-radio label="1" disabled>上架</el-radio>
						<el-radio label="0" disabled>下架</el-radio>
					</el-radio-group>
				</el-form-item>
			</div>

			<div v-else-if="activeIndex==3">
				<div class="shop-img">
					<el-row>
						<el-col :span="2">
							<div class="grid-content bg-purple"> 标题图片</div>
						</el-col>
						<el-col :span="22">
							<el-row>
								<el-col :span="24">
									<el-alert title="标题图片只能上传一张！" type="info">
									</el-alert>
								</el-col>
								<el-col :span="5">
									<img :src="shopFrom.title_pic" alt="标题图片" height="148px" width="148px">
								</el-col>
								<el-col :span="19">
									<div>
										<el-upload action="https://mini.dem99.com/admin/shop/upload_goods_img" list-type="picture-card" name="goods_img" :with-credentials="true" :on-success="titleSuccess" :limit="1" :on-exceed="titlEexceed" :on-remove="titleRemove">
											<i class="el-icon-plus"></i>
										</el-upload>
										<el-dialog :visible.sync="dialogVisible">
											<img width="100%" :src="shopFrom.title_pic" alt="">
										</el-dialog>
									</div>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</div>

				<div class="shop-img">
					<el-row>
						<el-col :span="2">
							<div class="grid-content bg-purple"> 详情图片</div>
						</el-col>
						<el-col :span="22">
							<el-row>
								<el-col :span="24">
									<el-alert title="点击图片即可删除，如若操作失误，返回到列表页即可找回!" type="info">
									</el-alert>
								</el-col>
								<el-col :span="24">
									<img v-for="(item,index) in fromPic" :src="item" @click="deletePic(index)" alt="详情图片" height="148px" width="148px" style="margin-right: 10px;">
								</el-col>
								<el-col :span="24">
									<el-upload action="https://mini.dem99.com/admin/shop/upload_goods_img" list-type="picture-card" name="goods_img" :multiple="true" :with-credentials="true" :on-success="describeSuccess" :on-remove="describeRemove">
										<i class="el-icon-plus"></i>
									</el-upload>
									<el-dialog :visible.sync="dialogVisible">
										<img width="100%" alt="">
									</el-dialog>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "detail",
		data() {
			return {
				id: "",
				title_pic: "", //标题图片临时url
				fromPic: [], //后台图片组
				describe_pic: [], //上传的图片组
				activeIndex: '1', //选项卡
				dialogVisible: false,
				shopFrom: {
					title: '', //名称
					shop_name: '', //店铺名
					price: "",
					o_price: "",
					sale_num: "", //商品销量
					view_num: '', //浏览量
					num: '', //商品库存数量
					describe_pic: "", //描述图片url
					title_pic: "", //标题图片url
					status: "", //上架
				}
			}
		},

		mounted: function() {
			var that = this;
			that.getParams();
		},
		methods: {
			//提示
			openHint(msg, type) {
				this.$message({
					message: msg,
					type: type
				});
			},
			//切换
			handleSelect(key, keyPath) {
				this.activeIndex = key;
			},
			// 取到参数 
			getParams() {
				this.id = this.$route.params.id;
				this.getshop_detail();
			},
			//shop detail
			getshop_detail: function() {
				var that = this;
				this.$axios.get('/shop/shop_goods', {
						params: {
							id: this.id
						}
					})
					.then(function(res) {
						console.log(res);
						if(res.data.code == 0) {
							that.shopFrom = res.data.data;
							//格式化数据
							that.shopFrom.status = res.data.data.status + "";
							that.fromPic = res.data.data.describe_pic.split(",");
							that.shopFrom.price = res.data.data.price / 100;
							that.shopFrom.o_price = res.data.data.o_price / 100;
						}
					}).catch(function(error) {
						//console.log(error);
					});
			},

			//删除标题图片
			titleRemove(file) {
				this.title_pic = "";
			},
			//文件个数超出
			titlEexceed: function(res, file) {
				var that = this;
				that.openHint("只能上传一张标题图片", "warning")
			},
			//标题图片callback
			titleSuccess: function(res, file) {
				//console.log(res.data);
				if(res.code == 0) {
					this.openHint('上传成功', 'success')
					this.title_pic = res.data;
				} else {
					this.openHint('上传失败', 'error');
				}
			},

			//描述图片callback
			describeSuccess: function(res, file, describePic) {
				//console.log(res, file, describePic);
				if(res.code == 0) {
					this.openHint('上传成功', 'success')
					this.describe_pic = describePic;
					this.dispose_pic();
				} else {
					this.openHint('上传失败', 'error');
				}
			},
			//删除描述图片
			describeRemove(file, describePic) {
				//console.log(file, describePic);
				this.describe_pic = describePic;
				this.dispose_pic();
			},

			//删除图片
			deletePic: function(index) {
				this.$confirm('此操作将删除图片，是否继续？', "图片删除", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.openHint('删除成功', 'success')
					this.fromPic.splice(index, 1);
					console.log(this.fromPic);
				}).catch(() => {
					this.openHint('取消删除', 'info');
				});
			},
			// 处理详情图片
			dispose_pic: function() {
				var pic_list = [];
				var describe_pic = this.describe_pic;
				for(var i = 0; i < describe_pic.length; i++) {
					if(describe_pic[i].response.code == 0) {
						pic_list.push(describe_pic[i].response.data);
						this.describe_pic = pic_list;
					}
				}
			},
			// 合并图片
			mergePic: function() {
				var title_pic = this.title_pic;
				var imgArray = this.describe_pic.concat(this.fromPic);
				this.shopFrom.describe_pic = imgArray.join(",");
				if(title_pic !== "") {
					this.shopFrom.title_pic = title_pic;
				}
			},

			//修改信息
			onSubmit() {
				var that = this;
				this.mergePic();
				this.$confirm('此操作将修改该商品信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function(res) {
					that.submitShop();
				}).catch(function() {
					that.openHint("已取消", "success");
				});
			},
			// 提交修改
			submitShop: function() {
				var that = this;
				var data = this.shopFrom;
				if(data.title !== "" && data.shop_name !== "" && data.o_price !== "" && data.price !== "" && data.num !== "" && data.describe !== "" && data.title_pic !== "" && data.describe_pic !== "") {
					this.$axios.put('/shop/shop_goods', {
						id: data.id,
						title: data.title,
						shop_name: data.shop_name,
						o_price: data.o_price * 100,
						price: data.price * 100,
						num: data.num,
						describe: data.describe,
						title_pic: data.title_pic,
						describe_pic: data.describe_pic,
					}).then(function(res) {
						if(res.data.code == 0) {
							that.openHint("保存成功！", 'success');
							setTimeout(function() {
								that.$router.push({
									path: '/shopList',
									name: 'sList',
								})
							}, 1000)
						} else {
							that.openHint('修改失败', 'error');
							that.$router.push({
								path: '/shopList',
								name: 'sList',
							})
						}
					})
				} else {
					that.openHint('商品信息有误，请仔细检查！', 'warning')
				}

			}
		}
	}
</script>

<style scoped>
	.header {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #eeeeee;
	}
	
	.shop-img {
		margin-bottom: 20px;
		font-size: 14px;
		color: #606266;
		padding: 0 0 0 12px;
	}
	
	.d_tabbar {
		/*margin-bottom: 10px;*/
		border: 0px;
	}
	
	.menu-item {
		height: 40px;
		line-height: 40px;
	}
	
	.el-upload--picture-card {
		height: 100px !important;
		width: 100px !important;
	}
</style>